<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<th:block layout:fragment="head-include">
</th:block>
</head>
<body>
<section class="content-header">
      <row>
         <ol class="breadcrumb">
	        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
	        <li class="active"><i class="fa fa-users"></i>用户管理</li>
	      </ol>
      </row>    
    </section>
<section layout:fragment="content" class="content">
			<div class="row">

			<!-- 新增 -->
			<div class="modal fade" id="sysUserModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
				<div  class="modal-dialog">
					
					<div class="box box-primary">
						<div class="box-header with-border">
							<button type="button" class="close closePop" data-dismiss="modal" aria-label="Close">
    			                <span aria-hidden="true">&times;</span>
                			</button>
							<h4 class="body-title" id="titelTag" th:attr="save='增加',update='编辑'">Add</h4>
						</div>

						<div class="box-body">
							<!-- The form is placed inside the body of modal -->
						
							<form id="sysUserForm" method="post" class="form-horizontal" th:action="@{save}" th:attr="save=@{save},update=@{update}" autocomplete="off">		
								<input type="hidden" name="userId" autocomplete="off"/>
								<input type="hidden" name="userType" autocomplete="off"/>
								<input type="hidden" class="form-control" id="originalloginName" name="originalloginName" autocomplete="off" />

								<div class="form-group">
									<label class="col-xs-3 control-label" th:text="账号">账号</label>
									<div class="col-xs-7">
										<input type="text" class="form-control" name="loginName" id="loginName" autocomplete="off"/>
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-3 control-label" th:text="密码">密码</label>
									<div class="col-xs-7">
										<input id="password" type="password" class="form-control" name="password" 
										th:attr="data-fv-regexp-message='密码不能为空'" autocomplete="off"/>
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-3 control-label" th:text="确认密码">确认密码</label>
									<div class="col-xs-7">
										<input id="confirm" type="password" class="form-control" name="confirm" 
										th:attr="data-fv-regexp-message='确认密码不能为空'" autocomplete="off"/>
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-3 control-label" th:text="权限">权限</label>
									<div class="col-xs-7">
										<select name="power" class="form-control">
											<option value="1">操作员</option>
											<option value="2">管理员</option>
										</select>
									</div>
								</div>	
								
								<div class="form-group">
									<label class="col-xs-3 control-label" th:text="姓名">姓名</label>
									<div class="col-xs-7">
										<input type="text" class="form-control" name="name" autocomplete="off"/>
									</div>
								</div>	
								<div class="form-group">
									<label class="col-xs-3 control-label" th:text="电话">电话</label>
									<div class="col-xs-7">
										<input type="text" class="form-control" name="telephone" autocomplete="off"/>
									</div>
								</div>	
								<div class="form-group">
									<label class="col-xs-3 control-label" th:text="部门">部门</label>
									<div class="col-xs-7">
										<input type="text" class="form-control" name="department" autocomplete="off"/>
									</div>
								</div>	
				                  <!-- 								所属组织 -->
				                  <div class="form-group has-feedback">
				                    <label class="col-xs-3 control-label" th:text="所属组织">deviceType</label>
				                    <div class="col-xs-7">
				                      <select class="form-control" name="orgid" id="orgSelect">
				                        <option th:each="item,iterStat : ${orgs}" th:attr="value=${item.id},selected=${item.id}==${orgid}?'Selected'" th:text="${item.orgName}">1</option>
				                      </select>
				                    </div>
				                  </div>
								
								<div class="form-group">
									<div class="text-center">
										<button type="submit" class="btn btn-primary"  th:text="确认">ok</button>
										<button type="button" class="btn btn-default closePop" data-dismiss="modal" th:text="取消">Cancel</button>
									</div>
								</div>
							</form>
						</div>
					
					</div>
				</div>
			</div>
			<!-- 显示 -->
			<div class="col-md-12">
				<div class="box box-primary">
					<div class="box-header with-border">
						<h3 class="box-title">用户管理</h3>
						<div class="box-tools">
							<button type="button" class="btn btn-primary btn-sm" id="popButton" data-toggle="modal" data-target="#sysUserModal"><i class="fa  fa-plus"></i>&nbsp;&nbsp;添加用户</button>
						</div>
					</div>
					
					<div class="box-body no-padding">
						<table class="table table-striped table-bordered table-hover dataTable">
							<thead>
								<tr class="bg-light-blue disabled">	
									<th>
										序号
									</th>
									<th>
										登录名
									</th>				
									<th>
										姓名
									</th>
									<th>
										电话
									</th>
									<th>
										部门
									</th>
									<th>
										操作
									</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="sysUser,iterStat : ${sysUsers}">
									<!-- <td class="text-center"  th:text="${iterStat.count}">0</td>	 -->
									<td th:text="${iterStat.count}">0</td>
									<td th:text="${sysUser.loginName}"></td>
									<td th:text="${sysUser.name}"></td>
									<td th:text="${sysUser.telephone}"></td>	
									<td th:text="${sysUser.department}"></td>		
									<td>
										<a class="editOne btn btn-box-tool" th:title="编辑" th:attr="dataId=${sysUser.userId}">
											<i class="fa fa-edit"></i>
										</a>
										<a class="delOne btn btn-box-tool" th:title="删除" th:attr="dataId=${sysUser.userId}">
											<i class="fa fa-minus"></i>
										</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				
			</div>
			</div>



		<!-- 删除 -->
			<div class="modal fade" tabindex="-1" role="dialog">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title">Modal title</h4>
			      </div>
			      <div class="modal-body">
			        <p>One fine body&hellip;</p>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Clos7e</button>
			        <button type="button" class="btn btn-primary">Save changes</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->


			<script th:inline="javascript">	
			$('.datepicker').datepicker({
	            language:  "zh-CN",  
	            autoclose: true,

	            startView: 0,  
	            format: "yyyy-mm-dd",  
	            clearBtn:false,  
	            todayBtn:true 
			});
		
				$(function() {				
					//列表界面点击删除按钮删除用户
					$(".delOne").click(function() {
						var obj = $(this);
						winTip.confirmAndTitle("提示","确认要删除吗？", function(result) {
							if(!result) {
								return;
							}
							var id = obj.attr("dataId");
							$.ajax({
								url: "user/del/" + id,
								type: 'POST',
								success: function(result) {
									if(result.status == 200) {										
										//window.location.reload();
										$("#orgList").html('');
										sysUserList ();
			              $('body').removeClass('modal-open'); 
			              $('modal').removeClass('in');
			              $('.modal-backdrop .fade').removeClass("in");
			              $('body').css('background-color','rgba(0,0,0,0)') 
			              $('#sysUserModal').modal('hide')
			              $(".modal-backdrop").remove();
									} else {
										winTip.alert(result.message);
									}
								}

							});
						})
					})
					//列表界面点击编辑按钮编辑用户信息
					$(".editOne").click(function() {
						var obj = $(this);
						var id = obj.attr("dataId");
						$.ajax({
							url: "user/get/" + id,
							type: 'POST',
							success: function(result) {
								if(result.status == 200) {
									var obj = result.data;

									$("#popButton").click();
									$("#titelTag").text("编辑");
									$("#sysUserForm input[name='userId']").val(obj.userId);
									$("#sysUserForm input[name='originalloginName']").val(obj.loginName);
									$("#sysUserForm input[name='loginName']").val(obj.loginName);
									$("#sysUserForm input[name='password']").val(obj.password);
									$("#sysUserForm input[name='confirm']").val(obj.password);
									$("#sysUserForm select[name='power']").val(obj.power);
									$("#sysUserForm input[name='name']").val(obj.name);
									$("#sysUserForm input[name='telephone']").val(obj.telephone);
									$("#sysUserForm input[name='department']").val(obj.department);
									$("#sysUserForm input[name='userType']").val(obj.userType);
					                if (obj.org){
					                	$("#sysUserForm select[name='orgid']").val(obj.org.id)
					                } else {
					                	$("#sysUserForm select[name='orgid']").val("");
					                }
					                	
									var loginName = document.getElementById("loginName");
									//loginName.setAttribute("readonly", "readonly");
								} else {
									winTip.alert(result.message);
								}
							}

						});
					})
					$("#popButton").click(function() {
						$("#titelTag").text($("#titelTag").attr("save"));
						var loginName = document.getElementById("loginName");
						//loginName.removeAttribute("readonly");
						$("#sysUserForm input[name='userId']").val("");
						$("#sysUserForm input[name='originalloginName']").val("");
						$("#sysUserForm input[name='loginName']").val("");
						$("#sysUserForm input[name='password']").val("");
						$("#sysUserForm input[name='confirm']").val("");
						$("#sysUserForm input[name='name']").val("");
						$("#sysUserForm input[name='telephone']").val("");
						$("#sysUserForm input[name='department']").val("");
						
						
						//customUtil.initPositionDialog($('#peopleModal'),525,'input[name="userName"]');
						//$("#deviceForm input[name='userName']").focus();					
					})
					$(".closePop").click(function() {

					})
					
 		$("#sysUserForm").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
            	loginName: {
					validators: {
						notEmpty: {
							message: "用户名不能为空"
						},
	                    remote: {
	                    	url: '/user/validateName/',
	                    	data: {'loginName' : $('#loginName').val(), 'originalloginName' : function(){ return $('#originalloginName').val();}},
	                    	type: 'POST',
	                    	delay: 1000,
	                    	message: "用户名已存在",
	                    },
						 regexp: {
	                         regexp: /^[a-zA-Z0-9_\.]+$/,
	                         message: '用户名由数字字母下划线和.组成'
	                     }
					}
				},
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        identical: {//相同
                            field: 'confirm',
                            message: '两次密码不一致'
                        },
                    }
                },
                confirm: {
                	validators: {
                        notEmpty: {
                            message: '确认密码不能为空'
                        },
                        identical: {//相同
                            field: 'password',
                            message: '两次密码不一致'
                        },
                    }
                },
				name:{
					validators: {
						notEmpty: {
							message: '姓名不能为空'
						}
					}
				},
				orgid:{
					validators: {
						notEmpty: {
							message: '所属组织不能为空'
						}
					}
				},
            }
        }).on("success.form.bv" ,function(e){
    						e.preventDefault();
    						var $form = $(e.target);

    						 // Get the BootstrapValidator instance
    				         var bv = $form.data('bootstrapValidator');
    						// Use Ajax to submit form data
    						var nextUrl;
    						//if($("#deviceForm input[name='id']").val() == '') {
							nextUrl = "/user/save";// + $form.attr('save');
    						//} else {
    						//	nextUrl = "/device/" + $form.attr('update');
    						//}
    						$.ajax({
    							url: nextUrl,
    							type: 'POST',
    							data: $form.serialize(),
    							success: function(result) {
    								if(result.status == 200) {
    									//winTip.alert([[#{opt.submitSuccess}]], function() {
    										//window.location.reload();
    										$("#orgList").html('');
    										sysUserList ();
					              $('body').removeClass('modal-open'); 
					              $('modal').removeClass('in');
					              $('.modal-backdrop .fade').removeClass("in");
					              $('body').css('background-color','rgba(0,0,0,0)') 
					              $('#sysUserModal').modal('hide')
					              $(".modal-backdrop").remove();
    									//});
    								} else {
    									winTip.alert(result.message);
    								}
    							}

    						});        	
        		});
				
	});
			</script>
		</section>
</body>
</html>
